<template>
  <material-card
    color="primary"
  >
    <template #title>
      <v-row>
        <small class="text-body-1">{{ title }}</small>
        <v-btn
          class="mx-0"
          fab
          icon
          x-small
          color="primary"
          @click="refleshX()"
        >
          <v-icon>mdi-cached</v-icon>
        </v-btn>
        <v-spacer />
        <span style="font-size: 30px;"><i>{{ x.toFixed(2) }}%</i></span>
      </v-row>
    </template>
    <div class="text-center">
      <v-progress-circular
        :rotate="90"
        :size="148"
        :width="30"
        :value="x"
        :color="color"
      >
        {{ x.toFixed(2) + '%' }}
      </v-progress-circular>
    </div>
  </material-card>
</template>

<script>
  export default {
    name: 'ProgressX',
    props: {
      value: Number,
      title: String,
      interval: {
        type: Number,
        required: false,
        default: 5000,
      },
      strokeWidth: {
        type: Number,
        required: false,
        default: 30,
      },
      scaleSize: {
        type: Number,
        required: false,
        default: 148,
      },
    },
    data: () => ({
      x: 0,
    }),
    computed: {
      color () {
        if (this.x > 80 && this.x < 90) {
          return 'lime darken-3'
        } else if (this.x >= 90) {
          return 'red darken-4'
        } else {
          return 'primary'
        }
      },
    },
    watch: {
      x (val, oldVal) {
      },
      value (val, oldVal) {
        this.x = val
      },
    },
    mounted () {
    },
    methods: {
      refleshX () {
        console.log('progressX refleshX')
      },
    },
  }
</script>
